<template>
    <div class="login-page page-wrapper">
        <h3 class="login-form-title">
            用户ID
        </h3>

        <el-form style="padding-top: 30px" :rules="ruleForm" :model="Form" label-width="100px" class="login-form" label-position="right">
            <el-form-item label="ID" prop="ID">
                <el-row>
                    <el-col :span="17">
                        <el-input size="mini" type="text" v-model="Form.Id" auto-complete="off"></el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item style="padding-top: 10px">
                <el-button size="mini" type="primary" @click="saveId(Form.Id)">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapGetters,mapMutations } from "vuex"
    export default {
        name: "login-page",
        data:function () {
            return {
                Form:{
                    token:"",
                    Id:""
                },
                ruleForm:{
                    ID: [
                        { required: true, trigger: 'blur',message:"ID必填" }
                    ]
                }
            }
        },
        methods:{
            saveId(val){
                if(val!== ""){
                    this.$confirm('是否确认次ID为用户Id?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.setUserId(val);
                        location.replace("#/judge");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            ...mapMutations({
                "setUserId":"SET_USERID"
            })
        },
        computed:{

        }
    }
</script>

<style lang="less">
    .login-page{
        padding:20px 77px;
        .login-form{
            &-title{
                width: 100%;
                text-align: center;
                font-size: 24px;
                color: #fff;
                letter-spacing: 5px;
            }
            .el-form-item__label{
                color: #fff;
            }
        }
    }
</style>